import { Button, Mask, Modal, Space } from "antd-mobile";
import React, { useEffect } from "react";
import $fetch from "../../../utils/app/$fetch";
import $reducer from "../../../utils/app/$reducer";
import "./style.scss";

export default function SelectPopup({
  memberId,
  memberName,
  eventId,
  onClose,
}: any) {
  const initState: any = {
    commonTotal: 0,
    specificTotal: 0,
    selectedTotal: 0,
    commonSelected: 0,
    specificSelected: 0,
    commonId: "",
    specificId: "",
    visible: false,
  };

  const [state, dispatch] = $reducer({ ...initState });

  useEffect(() => {
    queryNum();
  }, []);

  const queryNum = async () => {
    const res: any = await $fetch(
      `line/queryByElectric/${memberId}?eventId=${eventId}`,
      {},
      { method: "post", noGroupId: "no", loading: false }
    );
    res?.map((item: any) => {
      if (item?.goodsName === "通用电切券") {
        dispatch({ commonTotal: item?.goodsNum, commonId: item?.goodsId });
      } else if (item?.goodsName === `${memberName + "电切券"}`) {
        dispatch({ specificTotal: item?.goodsNum, specificId: item?.goodsId });
      }
    });
    dispatch({ visible: true });
  };

  const handleNumReduce = (type: any) => {
    if (type === "common") {
      if (state?.commonSelected === 0) {
        return;
      } else {
        dispatch({
          commonSelected: state?.commonSelected - 1,
          selectedTotal: state?.selectedTotal - 1,
        });
      }
    } else if (type === "specific") {
      if (state?.specificSelected === 0) {
        return;
      } else {
        dispatch({
          specificSelected: state?.specificSelected - 1,
          selectedTotal: state?.selectedTotal - 1,
        });
      }
    }
  };

  const handleNumAdd = (type: any) => {
    if (type === "common") {
      if (state?.commonSelected === state?.commonTotal) {
        return;
      } else {
        dispatch({
          commonSelected: state?.commonSelected + 1,
          selectedTotal: state?.selectedTotal + 1,
        });
      }
    } else if (type === "specific") {
      if (state?.specificSelected === state?.specificTotal) {
        return;
      } else {
        dispatch({
          specificSelected: state?.specificSelected + 1,
          selectedTotal: state?.selectedTotal + 1,
        });
      }
    }
  };

  const handleQueue = async () => {
    let params: any = [];
    if (state?.commonSelected) {
      params.push({
        goodsId: state?.commonId,
        goodsNum: state?.commonSelected,
      });
    }
    if (state?.specificSelected) {
      params.push({
        goodsId: state?.specificId,
        goodsNum: state?.specificSelected,
      });
    }
    try {
      await $fetch(
        `/line/startLineByElectric/${memberId}?eventId=${eventId}`,
        params,
        { method: "post", noGroupId: "no" }
      );
      dispatch({ ...initState });
      onClose(true);
    } catch (error) {
      console.log(error, "______error");
    }
  };

  return (
    <Mask
      visible={state?.visible}
      onMaskClick={() => {
        dispatch({ ...initState });
        onClose();
      }}
    >
      <div className="popup_wraper">
        <h4>请选择使用张数</h4>
        <div className="content">
          <div className="type">
            <div>可用类型</div>
            <div>通用电切券</div>
            <div>{memberName}电切券</div>
          </div>
          <div className="num_available">
            <div>可用张数</div>
            <div>{state?.commonTotal}</div>
            <div>{state?.specificTotal}</div>
          </div>
          <div className="num_select">
            <div>使用张数</div>
            <div className="add_reduce">
              <div
                className="num_down"
                onClick={() => handleNumReduce("common")}
              >
                -
              </div>
              <div className="item_num">{state?.commonSelected}</div>
              <div className="num_add" onClick={() => handleNumAdd("common")}>
                +
              </div>
            </div>
            <div className="add_reduce">
              <div
                className="num_down"
                onClick={() => handleNumReduce("specific")}
              >
                -
              </div>
              <div className="item_num">{state?.specificSelected}</div>
              <div className="num_add" onClick={() => handleNumAdd("specific")}>
                +
              </div>
            </div>
          </div>
        </div>
        <div className="selected_total">共选择{state?.selectedTotal}张</div>
        <Space wrap style={{ display: "flex", justifyContent: "center" }}>
          <Button
            block
            onClick={() => {
              dispatch({ ...initState });
              onClose();
            }}
          >
            取消
          </Button>
          <Button
            block
            color="primary"
            onClick={() => {
              handleQueue();
            }}
          >
            确定
          </Button>
        </Space>
      </div>
    </Mask>
  );
}
